<template>
  <div class="detail">
    <div
      class="header"
      :style="{ backgroundImage: 'url(' + info.head_pic_url + ')' }"
    >
      <van-nav-bar
        title="详情页"
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="$router.back()"
      />
      <div class="shop_header">
        <div class="title">
          <div class="left">
            <div class="imgbox">
              <img :src="info.picUrl" alt="" />
            </div>
            <h2>{{ info.name }}</h2>
          </div>
          <div class="right">
            <span style="color: red" @click="cancel1(info)" v-if="isCollection"
              >❤</span
            >
            <span style="color: white" @click="requeset_fav(info)" v-else>❤</span>
          </div>
        </div>

        <div class="btn">
          <span
            v-for="(item, index) in btn"
            :key="index"
            @click="active(index)"
            :class="{ active: currentIndex == index }"
            >{{ item }}</span
          >
        </div>

        <div class="card">
          <div class="send">
            商家配送{{ info.deliveryTimeTip }} | 距离{{ info.distance }}
          </div>
          <div class="volume">
            <span>￥7 </span>
            <van-icon name="gem" />
            <span> 无门槛 </span>
            <span> | </span>
            <span>领取</span>
          </div>
          <span class="allowance"> 津贴 2元 </span>
          <div class="inform">
            <p>{{ info.bulletin }}</p>
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="goods">
        <div class="left">
          <ul>
            <li
              v-for="(item, index) in goods"
              :key="index"
               @click="active(index)"
              :class="{ active1: currentIndex == index }"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="right">
          <!-- 初次因为 goods是空的会报错，使用 && 判断 修改报错（如果goods[currentIndex]不为空，再读取goods[currentIndex].goodlist）-->
          <div
            class="content"
            v-for="(item, index) in goods[currentIndex] &&
            goods[currentIndex].goodlist"
            :key="index"
          >
            <div class="imgBox">
              <img :src="item.picture" alt="" />
            </div>
            <div class="text">
              <h2>{{ item.name | ellipsis}}</h2>
              <p>{{ item.unit }}</p>
              <div class="sales">
                <span>{{ item.month_saled_content }}</span>
                <span>{{ item.promotion_info }}</span>
              </div>
              <div class="pirce">
                <span>{{ item.min_price }}</span>
                <div class="num_btn">
                  <span v-show="according(item)" @click="sub1(item)">-</span>
                  <span v-show="according(item)">{{cartnum(item)}}</span>
                  <span  @click="request_shopcartAdd(item)">+</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ShopCart ref="cart"/>
    <div class="cartbtn">
      <div class="cart_left">
        <van-icon name="send-gift" size="1.4rem" @click="$refs.cart.changeVisible()"/>
        <span>总数：{{sum}} </span>
        <span> 总价：{{totalPrice}}</span>
      </div>
      <div class="cart_right">
        去结算
      </div>
    </div>
  </div>
</template>

<script>
import ShopCart from '@/components/ShopCart.vue'
import { detail, unfav, shopcart_sub} from '@/utils/api'
import { Dialog, Toast } from 'vant';
//导入vuex中的工具函数(辅助函数) , 使用该工具函数 简化vuex在组件中的应用
import {  mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
  components:{
    ShopCart
  },
  data() {
    return {
      currentIndex: 0,
      btn: ["搜索", "点餐", "评价", "商家"],
      info: {},
      goods:[],
    };
  },
  mounted(){
    var id = this.$route.params.id
    detail({id:id}).then((res)=>{
        console.log(res.data);
        if(res.data.shopinfo){
            this.info = res.data.shopinfo.info
            this.goods = res.data.shopinfo.taglist
        }else{
            Dialog.confirm({
                title: '提示',
                message: '该店铺已倒闭，请选择其他店铺',
            }).then(() => {
                this.$router.back()
            })
            
        }
    })
  },
  methods:{
    ...mapMutations(['collection','cancel']),
    // 映射异步方法，收藏店铺、购物车数量加一
    ...mapActions(['requeset_fav','request_shopcartAdd']),
    // 取消店铺收藏
    cancel1(info){
      var userid = JSON.parse(localStorage.getItem('userinfo')).id;
      unfav({userid,shopid:info.mtWmPoiId}).then((res)=>{
        console.log(res);
        if(res.data.code == 200){
          Toast.fail(res.data.msg)
          this.$store.commit('cancel',info)
        }
      })
    },
    // 购物车减一 
    sub1(item){
       var userid = JSON.parse(localStorage.getItem('userinfo')).id
        shopcart_sub({userid,goodid:item.id}).then((res)=>{
             console.log(res);
                if(res.data.code == 200){
                this.$store.commit('cart_sub',item)
            }
        }).catch((e)=>{})
    },
    // 商品数量加一
    // cartAdd(item){
    //   request_shopcartAdd(item)
    // },

    active(index){
        this.currentIndex = index
    },
    // 商品减号数量的显示隐藏
    according(element){
      var obj = this.$store.state.shopCartList.find((items)=>{
          return items.id == element.id
      })
      if(obj){
        return true 
      }else{
        return false
      }
    },
    // 商品数量
    cartnum(element){
      var obj = this.$store.state.shopCartList.find((items)=>{
          return items.id == element.id
      })
      if(obj){
        return obj.count
      }
    }
  },
  computed:{
    //mapState()这个工具函数 会将vuex中的数据 映射到组件的computed中.
    // 购物车列表
    ...mapState(['shopCartList','collectList']),
    ...mapGetters(['sum','totalPrice']),
    // 判断vuex中有没有该店铺
    isCollection(){
      var id = this.collectList.findIndex((item)=>{
        return item.mtWmPoiId == this.info.mtWmPoiId
      })
      if(id != -1){
        return true
      }
    }

  },
  filters: {
    ellipsis(vla) {
      if (vla.length > 20) {
        return vla.substr(0, 20) + "...";
      } else {
        return vla;
      }
    },
  },

};
</script>

<style scoped lang="scss">
.detail {
  .header {
    margin-bottom: .5333rem;
    background: no-repeat, center;
    background-size: 100% 100%;
    // background-image: linear-gradient(to top,rgba(255,255,255,1), rgba(0,0,0,0));
    width: 100%;
    .van-nav-bar {
      background-color: rgba($color: #000000, $alpha: 0);
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0rem;
    }
    .shop_header {
      // background: pink;
      margin: .2667rem;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: .4rem 0;
        .left {
          display: flex;
          align-items: center;
          .imgbox {
            width: 1.0667rem;
            margin-right: .4rem;
            img {
              display: block;
              width: 100%;
              border-radius: 50%;
            }
          }
          h2 {
            font-size: .48rem;
            color: #eee;
            font-weight: normal;
          }
        }
        .right {
          font-size: .64rem;
        }
      }
      .btn {
        color: #fff;
        margin-bottom: .4rem;
        position: sticky;
        top: 0;
        span {
            font-size: .4267rem;
          margin-right: .5333rem;
          padding-bottom: .08rem;
        }
        .active {
          font-weight: 700;
          border-bottom: .08rem solid white;
        }
      }
      .card {
        background: white;
        border-radius: .2667rem;
        box-sizing: border-box;
        padding: .2667rem;
        box-shadow: 0 .1333rem .1333rem #f5f5f5;
        .send {
          font-size: .3733rem;
          color: #111;
          margin-bottom: .2667rem;
        }
        .volume {
          width: 4.8rem;
          box-sizing: border-box;
          padding: .2667rem .4rem;
          border-radius: .1333rem;
          margin-bottom: .2667rem;
          background-color: #fee5b8;
          color: #222;
          span:first-child {
            font-weight: 700;
            font-size: .48rem;
          }
          i,
          span:nth-child(3) {
            font-size: .32rem;
          }
          span:nth-child(4) {
            margin: 0 .1333rem;
          }
          span:last-child {
            font-size: .4267rem;
            font-weight: 600;
          }
        }
        .allowance {
          display: inline-block;
          box-sizing: border-box;
          padding: .08rem .16rem;
          font-size: .3733rem;
          color: red;
          background-color: lightpink;
          opacity: 0.8;
          margin-bottom: .2667rem;
        }
        .inform {
          display: flex;
          justify-content: space-between;
          font-size: .3733rem;
          color: #999;
        }
      }
    }
  }
  .section {
    .goods {
      display: flex;
      margin: 0 .4rem;
      .left {
        //   background: pink;
        width: 2.1333rem;
        ul {
          width: 100%;
          overflow: hidden;
          li {
            width: 100%;
            //   background: red;
            span {
              // background: green;
              font-size: .3733rem;
              display: block;
              margin: .8rem auto;
              width: 1.3333rem;
              padding: .1333rem 0;
            }
          }
        }
      }
      .right {
        flex: 1;
        margin-top: .5333rem;
        .content {
          display: flex;
          margin-bottom: .4rem;
          width: 100%;
          .imgBox {
            margin-right: .2667rem;
            img {
              width: 2.6667rem;
              height: 2.6667rem;
            }
          }
          .text {
            width: 100%;
            position: relative;
            h2 {
              font-size: .3733rem;
              font-weight: 600;
            }
            p {
              margin: .1333rem 0;
            }
            p,
            .sales {
              font-size: .32rem;
              color: #666;
            }
            .sales span {
              margin-right: .2667rem;
            }
            .pirce {
              position: absolute;
              bottom: 0;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              >span{
                  font-size: .48rem;
                  color: red;
              }
              .num_btn{
                display: flex;
                span{
                  background-color: #1989fa;
                  font-size: .48rem;
                  width: .5333rem;
                  text-align: center;
                  border-radius: .2667rem;
                  color: white;
                  &:nth-child(2){
                    background-color: rgba($color: #000000, $alpha: 0);
                    color: #000000;
                  }
                }


              }
              // span {
              //   &:last-child {
              //     display: block;
              //     color: #fff;
              //     font-size: .5333rem;
              //     width: .5333rem;
              //     height: .5333rem;
              //     text-align: center;
              //     line-height: .5333rem;
              //     background-color: lightskyblue;
              //     border-radius: .2667rem;
              //     margin-right: .2667rem;
              //   }
              // }
            }
          }
        }
      }
    }
  }
  .cartbtn{
    background-color: #555;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .4rem;
    .cart_left{
      font-size: .48rem;
      color: white;
      position: relative;
      i{
        position:absolute;
        color: #1989fa;
        top: -0.9333rem;
        left: 0%;
      }
      span:nth-child(2){
        margin-left: 1.3333rem;
      }
    }
    .cart_right{
      background-color: rgb(41, 170, 41);
      color: white;
      font-size: .5333rem;
      padding: .1333rem .8rem;
      border-radius: .1333rem;
    }
  }
}
.active1 {
  border-left: .08rem solid red;
}
// 导航栏的样式
::v-deep .van-nav-bar .van-icon {
  color: white;
}
::v-deep .van-nav-bar__text {
  color: white;
}
::v-deep .van-nav-bar__title {
  color: white;
}
::v-deep.van-nav-bar {
  line-height: .64rem;
}
::v-deep .van-nav-bar__content {
  height: 1.28rem;
}
::v-deep .van-nav-bar__arrow {
  font-size: .4267rem;
}
::v-deep .van-nav-bar__text {
  font-size: .3733rem;
}
::v-deep .van-nav-bar__title {
  font-size: .4267rem;
}
</style>